<template>
	<view class="wrapper">
		<view class="container">
			<view :style="{backgroundImage: 'url('+imageURL+')'}" class="top">
				<view class="left">
					<image :src="userInfo.wxImg" mode="widthFix" v-if="userInfo.wxImg"></image>
					<image src="http://applet.atptest.com/c9WsCBqw1719467091124.jpg?v=1719467091295" mode="widthFix"
						v-else>
					</image>
					<view class="username_container">
						<view class="username">
							{{userInfo.wxName}}
						</view>
					</view>
				</view>
				<view class="right">
					<view @click="toRecord()" class="record">提现记录</view>
				</view>
			</view>
			<view class="nav">
				<view class="left">
					<view style="font-size: 32rpx;">￥{{commissionInfo.approveMoney}}</view>
					<view style="font-size: 24rpx;color: rgb(104, 104, 106);">可提取佣金</view>
				</view>
				<view class="right">
					<view style="font-size: 32rpx;">￥{{commissionInfo.stopMoney}}</view>
					<view style="font-size: 24rpx;color: rgb(104, 104, 106);">已提取佣金</view>
				</view>
			</view>
			<scroll-view :scroll-x="true" class="year_content">
				<view v-for="(item,index) in yearList" :key="index" class="year_item">
					<view :class="index==currentYear?'f-color-active':'f-color'" @click="yearClick(item,index)">
						{{item.value}}
					</view>
				</view>
			</scroll-view>
			<view class="commission_container" v-if="commissionList.length > 0">
				<view>
					<u-loading-icon :show="loading"></u-loading-icon>
				</view>
				<view class="commission_item" v-for="(item,index) in commissionList" :key="index">
					<u-checkbox-group v-model="item.checkboxList" placement="column">
						<view class="commission_title">
							<view class="line"></view>
							<view class="date" @click="expandHandle(item)">
								{{item.ym}}
							</view>
							<view class="arrow" @click="expandHandle(item)"
								:style="!item.expand ? 'transform: rotate(0deg)' : 'transform: rotate(90deg)'">
								<u-icon name="arrow-right" bold size="14"></u-icon>
							</view>
							<view class="all" @click="selectAll(item,index)"
								v-if="item.checkboxList.length != item.list.length">全部勾选</view>
							<view class="all" @click="cancelAll(item,index)" v-else>取消全选</view>
							<view class="price">
								可提取佣金: ￥{{item.sumMoney}}
							</view>
							<view class="price">
								订单数:{{item.count}}
							</view>
						</view>
						<view class="commission_box" v-show="item.expand">
							<view class="order_item" v-for="(it,i) in item.list" :key="i" @click="itemClick(item,it)">
								<view class="item_left">
									<view class="order_info">
										<view class="info">
											<view>
												{{it.name}}-下订单{{it.orderNo}}
											</view>
											<view style="color: #838383;font-size: 20rpx;">
												{{it.createTime}}
											</view>
										</view>
										<view class="price">￥{{it.agentMoney}}</view>
									</view>
								</view>
								<view class="item_right">
									<!-- 遮罩层 -->
									<view class="mask"></view>
									<u-checkbox :customStyle="{marginBottom: '8px'}" iconSize="18"
										:name="it.orderNo"></u-checkbox>
								</view>
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</view>
			<view class="commission_container" v-else>
				<view class="no_data">
					暂无数据
				</view>
			</view>
		</view>
		<view class="btn_container">
			<view class="btn" @click="applyHandle()">申请提现(￥{{totalMoney}})</view>
		</view>
		<view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		GetAgentCashOutRecord,
		GetAgentCashOutMoney,
		SubimtByCashOut
	} from "../../../api/withdraw.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				imageURL: "http://applet.atptest.com/xXXSyv491724981316993.png?v=1724981317375",
				currentYear: 0,
				commissionInfo: {
					approveMoney: 0,
					stopMoney: 0
				},
				yearList: [],
				commissionList: [],
				loading: false,
				totalMoney: 0,
				checkList: [],
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onShow() {
			this.getYear()
			this.getCommissionInfo()
		},
		methods: {
			//获取年份
			getYear() {
				this.yearList = []
				let date = new Date()
				let year = date.getFullYear()
				let differ = year - 2024
				for (let i = 0; i <= differ; i++) {
					this.yearList.push({
						value: year - i,
						stime: (year - i) + "-01-01",
						etime: (year - i) + "-12-31",
					})
				}
				this.getList(this.yearList[0])
			},
			//获取佣金列表
			async getList(params) {
				this.loading = true
				let req = {
					agentId:this.userInfo.agentId,
					stime: params.stime,
					etime: params.etime,
				}
				const res = await GetAgentCashOutRecord(req)
				this.loading = false
				this.commissionList = res;
				this.commissionList.forEach(item => {
					item.checkboxList = [];
					item.checkAll = [];
					item.expand = true;
				})
				for (let i = 0; i < this.commissionList.length; i++) {
					for (let j = 0; j < this.commissionList[i].list.length; j++) {
						this.commissionList[i].list[j].select = false
					}
				}
			},
			//获取可提现佣金 已提现佣金
			async getCommissionInfo() {
				const res = await GetAgentCashOutMoney({
					agentId: this.userInfo.agentId,
				})
				this.commissionInfo = res
			},
			//提现记录
			toRecord() {
				uni.navigateTo({
					url: "/pagesA/pages/withdrawRecord/withdrawRecord"
				})
			},

			//选择年份
			yearClick(item, i) {
				this.currentYear = i
				this.getList(item)
			},

			// 展开/隐藏
			expandHandle(item) {
				item.expand = !item.expand
				this.$forceUpdate()
			},

			//全部选择
			selectAll(item, i) {
				let orderNoList = item.list.map(it => {
					return it.orderNo
				})
				let checkAll = item.list.map(it => {
					return {
						agentId:this.userInfo.agentId,
						orderNo: it.orderNo,
						createTime: it.createTime,
						agentMoney: it.agentMoney,
						wxid: it.wxid
					}
				})
				item.checkboxList = orderNoList
				item.checkAll = checkAll
				item.list.forEach(it => {
					it.select = true
				})
				this.$forceUpdate()
				this.getTotalPrice()
			},

			//取消全选
			cancelAll(item, i) {
				item.checkboxList = []
				item.checkAll = []
				item.list.forEach(it => {
					it.select = false
				})
				this.$forceUpdate()
				this.getTotalPrice()
			},

			//点击单项
			itemClick(item, it) {
				if (!item.checkboxList.includes(it.orderNo)) {
					item.checkboxList.push(it.orderNo)
					item.checkAll.push({
						agentId:this.userInfo.agentId,
						orderNo: it.orderNo,
						createTime: it.createTime,
						agentMoney: it.agentMoney,
						wxid: it.wxid
					})
					it.select = true
				} else {
					item.checkboxList = item.checkboxList.filter(item2 => {
						return item2 != it.orderNo
					})
					item.checkAll = item.checkAll.filter(item3 => {
						return item3.orderNo != it.orderNo
					})
					it.select = false
				}
				this.$forceUpdate()
				this.getTotalPrice()
			},

			//计算总价
			getTotalPrice() {
				let agentMoney = 0
				for (let i = 0; i < this.commissionList.length; i++) {
					for (let j = 0; j < this.commissionList[i].list.length; j++) {
						if (this.commissionList[i].list[j].select) {
							agentMoney += this.commissionList[i].list[j].agentMoney
						}
					}
				}
				this.totalMoney = agentMoney.toFixed(2)
			},

			//申请提现弹框
			applyHandle() {
				let list = []
				for (let i = 0; i < this.commissionList.length; i++) {
					for (let j = 0; j < this.commissionList[i].checkAll.length; j++) {
						list.push(this.commissionList[i].checkAll[j])
					}
				}
				if (list.length <= 0) {
					return this.$refs.uToast.show({
						message: "请选择提现项",
					})
				}
				let that = this
				uni.showModal({
					title: `您申请的提现金额为${that.totalMoney}元`,
					content: '请确认是否要提交?',
					success: function(res) {
						if (res.confirm) {
							that.confirm(list)
						}
					}
				});
			},
			
			//确认提交
			async confirm(val){
				const res = await SubimtByCashOut(val)
				if(res){
					this.$refs.uToast.show({
						type: 'success',
						message: "提交成功",
					})
					this.getList(this.yearList[0])
					this.totalMoney = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;

		.container {
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 50rpx;
				height: 240rpx;
				color: #fff;
				box-sizing: border-box;
				background-size: cover;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.username_container {
						.username {
							font-size: 36rpx;
							font-weight: 600;
						}

						.phone {
							font-size: 24rpx;
							margin-top: 5rpx;
						}
					}
				}

				.right {
					.record {
						background-color: #3E56BA;
						color: #fff;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						border-radius: 18rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx;
					}
				}
			}

			.nav {
				display: flex;
				align-items: center;
				height: 130rpx;
				background: #fff;
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

				.left {
					width: 50%;
					text-align: center;
					border-right: 1px solid rgb(230, 230, 230);
				}

				.right {
					width: 50%;
					text-align: center;
				}
			}

			.year_content {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				white-space: nowrap;
				background-color: #fff;
				box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
				margin-top: 10rpx;

				.year_item {
					width: 20%;
					height: 80rpx;
					display: inline-block;
					text-align: center;
					margin: 0 20rpx;
				}
			}

			/* 字体颜色 */
			.f-color {
				color: #636263;
			}

			/* 选中字体颜色 */
			.f-color-active {
				height: 80rpx;
				color: #3E56BA;
				border-bottom: 3px solid #3E56BA;
			}

			.commission_container {
				width: 100%;
				height: 760rpx;
				overflow-y: scroll;
				margin-top: 20rpx;

				.no_data {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #68686A;
					font-weight: bold;
				}

				.commission_item {
					.commission_title {
						display: flex;
						align-items: center;
						padding: 20rpx 20rpx;
						box-sizing: border-box;
						height: 84rpx;

						.line {
							width: 6rpx;
							height: 100%;
							background-color: #3E56BA;
						}

						.date {
							font-size: 28rpx;
							color: #3D3D3D;
							margin-left: 20rpx;
						}

						.arrow {
							margin-left: 10rpx;
							transition: all .2s linear;
						}

						.all {
							padding: 6rpx 18rpx;
							box-sizing: border-box;
							border: 1px solid rgb(200, 200, 200);
							border-radius: 12rpx;
							background: #fff;
							margin-left: 20rpx;
							font-size: 24rpx;
							color: #6D6D6D;
						}

						.price {
							color: #3D3D3D;
							font-size: 20rpx;
							margin-left: 10rpx;
						}
					}

					.commission_box {
						width: 100%;
						padding: 20rpx 60rpx 40rpx 60rpx;
						box-sizing: border-box;
						background-color: #fff;
						transition: all 2s linear;

						.order_item {
							display: flex;
							justify-content: space-between;
							padding-bottom: 20rpx;
							box-sizing: border-box;
							margin-bottom: 20rpx;
							border-bottom: 4rpx solid #D5D5D5;
							transition: all 2s linear;

							.item_left {
								width: 80%;
								color: #3D3D3D;

								.order_info {
									width: 100%;
									display: flex;
									justify-content: space-between;

									.info {
										font-size: 28rpx;
									}

									.price {
										font-size: 24rpx;
									}
								}
							}
							.item_right{
								position: relative;
								.mask{
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									z-index: 99;
								}
							}
						}
					}
				}
			}
		}

		.btn_container {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;

			.btn {
				width: 100%;
				height: 80rpx;
				border-radius: 16rpx;
				background-color: #3E56BA;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>